import React from 'react'
import {NavLink} from 'react-router-dom'
import './ranking.less'

class Ranking extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      rankingList: [],
      ranking: {
        lastWeek: [
          {
            rank: 1,
            username: '三个字',
            amount: 1000,
            headUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541069131671&di=812bbc999872a9df0e7bf30693a746e4&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201501%2F25%2F20150125100602_SUQUk.jpeg'
          },
          {
            rank: 2,
            username: '方式大',
            amount: 1000,
            headUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541069131671&di=812bbc999872a9df0e7bf30693a746e4&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201501%2F25%2F20150125100602_SUQUk.jpeg'
          },
          {
            rank: 3,
            username: '瓦恩',
            amount: 1000,
            headUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541069131671&di=812bbc999872a9df0e7bf30693a746e4&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201501%2F25%2F20150125100602_SUQUk.jpeg'
          },
          {
            rank: 4,
            username: 'uwiasd',
            amount: 1000,
            headUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541069131671&di=812bbc999872a9df0e7bf30693a746e4&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201501%2F25%2F20150125100602_SUQUk.jpeg'
          }
        ],
        thisWeek: [],
        thisSeason: [],
        lastSeason: [],
      }
    }
  }

  public componentDidMount() {
    // Cookies.get('areaCode')
    // 初始化数据
    this.getRankingType(1);
   
  }

  private getRankingType(type) {

    const url = `${config.pre}/rank/select/${type}`
    const opt = { method: 'GET' }
    fetchJson(url, opt).then(data => {
      console.error(data)
       this.setState({
          rankingList:this.processList( data.data)
        })
    })
    .catch(err=>{
      console.error(err);
    })


    // console.log(type);
    // switch (type) {
    //   case 1:
    //     this.setState({
    //       rankingList: this.state.ranking.lastWeek
    //     })
    //     break;
    //   case 2:
    //     break;
    //   case 3:
    //     break;
    //   case 4:

    //   default:
    //     break;
    // }
  }

  private processList(list) {
    list.forEach((item, i) => {
      item._username = item.nickname[0] + "⭐⭐"
    })
    return list;
  }

  public render() {
    console.log(this.props)
    const {rankingList} = this.state;
    return <div className="view-page ranking-container">
          <div className="ranking-top">
            <div className="ranking-type pure-u-1-2" onClick={this.getRankingType.bind(this, 2)}>
              <img src="img/ranking/last-week.png?v=20181201" className="ranking-type-img" alt="" />              
            </div>
            <div className="ranking-type pure-u-1-2" onClick={this.getRankingType.bind(this, 4)}>
              <img src="img/ranking/last-season.png?v=20181201" className="ranking-type-img" alt="" />              
            </div>
            <div className="ranking-type pure-u-1-2" onClick={this.getRankingType.bind(this, 1)}>
              <img src="img/ranking/this-week.png?v=20181201" className="ranking-type-img" alt="" />              
            </div>
            <div className="ranking-type pure-u-1-2" onClick={this.getRankingType.bind(this, 3)}>
              <img src="img/ranking/this-season.png?v=20181201" className="ranking-type-img" alt="" />              
            </div>

            {/*<img src="img/app/shuaishuai-hy-text.png?v=20181201" className="shuai-text animated infinite" alt="" />*/}
          </div>
    <div className="ranking-container">
      {/*<span>网络⭐⭐⭐</span>*/}
      <ul>
      {
        rankingList.map((rank, index)=>{
          let rankIndex = index + 1;
          return <li className="task-item">
            <span className="rank-index">
              { rankIndex <= 3 ?  <img src={`img/ranking/rank${rankIndex}-medal.png?v=20181201`} alt="rank-high" className="rank-medal"/> : (rankIndex <=9 ? `0${rankIndex}` : rankIndex) }

            </span>
            <span  className="rank-avatar">
            {
              rankIndex <= 3 ? <img src={`img/ranking/rank${rankIndex}-crown.png?v=20181201`} alt="rank-high" className="rank-crown"/> : null
            }
              <img src={rank.headUrl} alt=""/>
            </span>
            <span className="rank-username">{rank._username}</span>
            <span className="rank-amount">
              <span>{rank.totalPrice}</span>
              <img src="img/userCenter/user-diamond.png?v=20181201" alt=""/>
            </span>

          </li>
        })
      }
      </ul>

      
    </div>

      {/*<div className="usercenter-bottom">
        <img className="bar" src="img/app/kuang-bottom.png?v=20181201" alt=""/>
        <div className="text"><span>公司资质</span></div>
        <NavLink to="/UserCenter"><img className="back" src="img/app/back.png?v=20181201" alt=""/></NavLink>
      </div>*/}
    </div>
  }

}

export default Ranking